<template>
  <div>
    <Card>
      <p slot="title"><Icon type="person"></Icon>个人信息</p>
      <div slot="extra">
        <!-- <Button type="warning" style="margin-right: 10px" @click="openwin"
          >修改信息</Button
        > -->
        <Button type="primary" @click="showEditPassword">修改密码</Button>
        <!-- <Button type="" @click="getInfo">刷新</Button> -->
      </div>
      <div>
        <div class="div_box">
          <div class="info">
            <div class="login-info-box">
              <div class="header-box"></div>
              <div class="login-ip">最后登录IP：{{ userInfo.lastLoginIp }}</div>
              <div class="login-time">
                最后登录时间：{{ userInfo.lastLoginTime }}
              </div>
            </div>
            <div class="desc_box">
              <ul>
                <li>账号</li>
                <li>{{ userInfo.nickName }}</li>
              </ul>
              <ul>
                <li>姓名</li>
                <li>{{ userInfo.name }}</li>
              </ul>
              <ul>
                <li>手机号</li>
                <li>{{ userInfo.phone }}</li>
              </ul>
              <ul>
                <li>所属街道</li>
                <li>{{ userInfo.street }}</li>
              </ul>
              <!-- <ul>
                <li>单位名称</li>
                <li>{{userInfo.companyName}}</li>
              </ul> -->
              <ul>
                <li>电子邮箱</li>
                <li>{{ userInfo.email }}</li>
              </ul>
              <!-- <ul>
                <li>用户权限</li>
                <li>
                  <template v-if="userInfo.role=='SuperAdmin'">总管理</template>
                  <template v-if="userInfo.role=='Admin'">管理员</template>
                </li>
              </ul> -->
            </div>
          </div>
        </div>
      </div>
    </Card>
    <!-- 修改密码 -->
    <Modal
      v-model="editPasswordModal"
      :closable="false"
      :mask-closable="false"
      :width="500"
    >
      <h3 slot="header" style="color: #2d8cf0">修改密码</h3>
      <Form
        ref="editPasswordForm"
        :model="editPasswordForm"
        :label-width="100"
        label-position="right"
        :rules="passwordValidate"
      >
        <FormItem label="原密码" prop="oldPass" :error="oldPassError">
          <Input
            v-model="editPasswordForm.oldPass"
            placeholder="请输入现在使用的密码"
          ></Input>
        </FormItem>
        <FormItem label="新密码" prop="newPass">
          <Input
            v-model="editPasswordForm.newPass"
            placeholder="请输入新密码，至少6位字符"
          ></Input>
        </FormItem>
        <FormItem label="确认新密码" prop="rePass">
          <Input
            v-model="editPasswordForm.rePass"
            placeholder="请再次输入新密码"
          ></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="cancelEditPass">取消</Button>
        <Button type="primary" :loading="savePassLoading" @click="saveEditPass"
          >保存</Button
        >
      </div>
    </Modal>

    <!-- 修改信息 -->
    <Modal
      v-model="userFormModal"
      :closable="false"
      :mask-closable="false"
      :width="500"
    >
      <h3 slot="header" style="color: #2d8cf0">修改信息</h3>
      <Form
        ref="userInfo"
        :model="userInfo"
        :label-width="100"
        :rules="userFormValidate"
      >
        <FormItem label="账号">
          {{ userInfo.username }}
        </FormItem>
        <FormItem label="手机号">
          <Input v-model="userInfo.phone" placeholder="请输入手机号"></Input>
        </FormItem>
        <FormItem label="用户邮箱">
          <Input v-model="userInfo.email" placeholder="请输入邮箱"></Input>
        </FormItem>
        <!-- <FormItem label="备注">
          <Input v-model="userInfo.remark" type="textarea" placeholder="请输入备注"></Input>
        </FormItem> -->
      </Form>
      <div slot="footer">
        <Button @click="userFormModal = false">取消</Button>
        <Button type="primary" :loading="savePassLoading" @click="hanleUserForm"
          >保存</Button
        >
      </div>
    </Modal>
  </div>
</template>

<script>
import axios from "axios";
// import { mapActions } from "vuex";
// import { getUserInfo,putUser,postupdateUserPasswordAPI} from "@/api/user.js";
// import util from "@/libs/util";
export default {
  name: "ownspace_index",
  data() {
    const validePhone = (rule, value, callback) => {
      var re = /^1[0-9]{10}$/;
      if (!re.test(value)) {
        callback(new Error("请输入正确格式的手机号"));
      } else {
        callback();
      }
    };
    const valideRePassword = (rule, value, callback) => {
      if (value !== this.editPasswordForm.newPass) {
        callback(new Error("两次输入密码不一致"));
      } else {
        callback();
      }
    };
    return {
      userInfo: {
        username: "",
        phone: "",
        sex: "",
        loginTime: "",
        identity: "",
        email: "",
      },
      userForm: {
        email: "",
        idNum: "",
        name: "",
        nickName: "",
        remark: "",
      },
      userFormValidate: {
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
        ],
      },
      userFormModal: false,

      editPasswordModal: false,
      savePassLoading: false,
      oldPassError: "",
      editPasswordForm: {
        oldPass: "",
        newPass: "",
        rePass: "",
      },
      passwordValidate: {
        oldPass: [{ required: true, message: "请输入原密码", trigger: "blur" }],
        newPass: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          { min: 6, message: "请至少输入6个字符", trigger: "blur" },
          { max: 32, message: "最多输入32个字符", trigger: "blur" },
        ],
        rePass: [
          { required: true, message: "请再次输入新密码", trigger: "blur" },
          { validator: valideRePassword, trigger: "blur" },
        ],
      },
    };
  },
  filters: {
    toUtcToTime(e) {
      if (e) {
        return util.utcToTime(e);
      } else {
        return "";
      }
    },
  },
  methods: {
    // ...mapActions(["getUserInfo"]),
    openwin() {
      this.userFormModal = true;
    },
    showEditPassword() {
      this.editPasswordModal = true;
    },
    cancelEditPass() {
      this.getInfo();
      this.userFormModal = false;
      this.editPasswordModal = false;
    },
    saveEditPass() {
      this.$refs.editPasswordForm.validate((valid) => {
        if (valid) {
          this.savePassLoading = true;
          // let oldPassWord = this.editPasswordForm.oldPass,
          //   newPassWord = this.editPasswordForm.newPass,
          //   verifyPassword = this.editPasswordForm.newPass
          let data = {
            id: this.userInfo.id,
            password: this.editPasswordForm.oldPass,
            newPassword: this.editPasswordForm.newPass,
          };
          axios
            .put(`/hlapi/SysUser/UserPwd`, data)
            .then((res) => {
              this.savePassLoading = false;
              this.$Message.success("密码修改成功，需要重新登录");
              this.$store.commit("user/logout", this);
              this.$router.push({
                name: "home",
              });
            })
            .catch((err) => {
             
              this.savePassLoading = false;
            });
        }
      });
    },
    hanleUserForm() {
      putUser(this.userInfo).then((res) => {
        this.$refs.userInfo.validate((valid) => {
          if (valid) {
            this.$Message.success("修改成功");
            this.getInfo();
            this.userFormModal = false;
          }
        });
      });
    },
    //当前登录用户信息
    getInfo() {
      axios.get(`/hlapi/Auth/LoginUserInfo`).then((res) => {
        let { success, data } = res;
        this.userInfo = data;
      });
    },
    init() {
      this.getInfo();
    },
  },
  mounted() {
    // let info = sessionStorage.getItem("info");
    // this.userInfo = JSON.parse(info);
    this.init();
  },
};
</script>
<style lang="less" scope>
.div_box {
  text-align: center;
}
.info {
  display: inline-block;
  margin: 20px;
  .login-ip {
    text-align: center;
  }
  .login-time {
    margin-top: 20px;
    text-align: center;
  }
  .login-info-box {
    background-color: #eeeeee;
    height: 400px;
    width: 300px;
    float: left;
  }
  .desc_box {
    float: left;
    margin-top: 10px;
  }
  .desc_box ul {
    // border: 1px solid red;
    // text-align: justify;
    display: flex;
    height: 40px;
    align-items: center;
    margin-bottom: 15px;
  }
  .desc_box ul li {
    list-style: none;
    font-size: 14px;
    color: #666;
    line-height: 30px;
    text-align: left;
    height: 40px;
    line-height: 40px;
  }
  .desc_box ul li:first-child {
    width: 60px;
    text-align: right;
    margin: 0 20px;
  }
  .desc_box ul li:last-child {
    padding: 0 10px;
    background-color: #eeeeee;
    width: 380px;
    border-radius: 4px;
  }
  .header-box {
    background-image: url(https://qnc.qjnice.com/FhT8Dl_1oBx0Iw4RTJJ7-28YM-bg);
    background-size: 128px;
    width: 128px;
    height: 128px;
    margin: 40px auto 20px auto;
  }
  .photo {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    img {
      width: 100%;
    }
  }
  .name {
    color: #fff;
    line-height: 40px;
    text-align: center;
  }
  .edit-photo {
    text-align: center;
  }
}
</style>